<template>
  <div class="footer">
    <el-dropdown>
      <el-button>
        中文简体<el-icon class="el-icon--right"><arrow-down /></el-icon>
      </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>Action 1</el-dropdown-item>
          <el-dropdown-item>Action 2</el-dropdown-item>
          <el-dropdown-item>Action 3</el-dropdown-item>
          <el-dropdown-item>Action 4</el-dropdown-item>
          <el-dropdown-item>Action 5</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <div class="footer_message">
      <div class="about" v-for="i in data" :key="i">
        <p>{{ i.title }}</p>
        <span v-for="j in i.arr" :key="j">{{ j.name }}</span>
      </div>
      <div class="upload">
        <p>欧易，随时随地交易</p>
        <div class="but">注册</div>
        <i></i>
        <span>扫码下载</span>
      </div>
    </div>
    <div class="share">
      <img src="../../assets/img/meun/t1.png" alt="" />
      <img src="../../assets/img/meun/t2.png" alt="" />
      <img src="../../assets/img/meun/t3.png" alt="" />
      <img src="../../assets/img/meun/t4.png" alt="" />
      <img src="../../assets/img/meun/t5.png" alt="" />
      <img src="../../assets/img/meun/t6.png" alt="" />
    </div>
  </div>
</template>
<script>
import { ref } from "vue";
export default {
  name: "footerP",
  setup() {
    const data = ref([
      {
        title: "关于欧易",
        arr: [
          {
            name: "关于我们",
            url: "",
          },
          {
            name: "联系我们",
            url: "",
          },
          {
            name: "服务条款",
            url: "",
          },
          {
            name: "隐私保护",
            url: "",
          },
          {
            name: "免责声明",
            url: "",
          },
          {
            name: "欧易APP",
            url: "",
          },
        ],
      },
      {
        title: "产品",
        arr: [
          {
            name: "快捷买币",
            url: "",
          },
          {
            name: "合约",
            url: "",
          },
          {
            name: "期权",
            url: "",
          },
          {
            name: "币币",
            url: "",
          },
        ],
      },
      {
        title: "买币",
        arr: [
          {
            name: "购买泰达币(USDT)",
            url: "",
          },
          {
            name: "购买比特币币(BITCOIN)",
            url: "",
          },
          {
            name: "购买以太币(ETHEREUM)",
            url: "",
          },
        ],
      },
      {
        title: "交易",
        arr: [
          {
            name: "BTC USDT",
            url: "",
          },
          {
            name: "ETC USDT",
            url: "",
          },
          {
            name: "MATIC USDT",
            url: "",
          },
          {
            name: "LTC USDT",
            url: "",
          },
          {
            name: "SOL USDT",
            url: "",
          },
          {
            name: "XRP USDT",
            url: "",
          },
        ],
      },
    ]);
    return { data };
  },
};
</script>
<style lang="scss" scoped>
.footer {
  // margin: 100px auto;
  
  // padding: 100px 400px;
  padding: 100px 10%;
  background-color: #121212;
  .footer_message {
    display: flex;
    margin-top: 60px;
    .about {
      margin-right: 100px;
      display: flex;
      flex-direction: column;
      > p {
        font-size: 20px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #ffffff;
      }
      > span {
        margin-top: 15px;
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #cccccc;
      }
    }
    .upload {
      display: flex;
      flex-direction: column;
      align-items: center;
      p {
        font-size: 20px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #ffffff;
      }
      span {
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #ffffff;
        margin-top: 10px;
      }
      .but {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 150px;
        height: 40px;
        background: #ffffff;
        border-radius: 22px;
        font-size: 20px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #000000;
        margin: 30px 0;
      }
      i {
        width: 108px;
        height: 108px;
        background: #ffffff;
        border-radius: 4px;
      }
    }
  }
  .share {
    margin-top: 80px;
    >img {
      width: 20px;
      height: 20px;
      margin-right: 37px;
    }
  }
}
</style>